---
title: "Styling the Grid (Draft)"
---

This tutorial demonstrates how to style, customise and extend the grid.

## Overview

In this tutorial you will:

1. [Pick a theme](./styling-the-grid/#choosing-a-theme)
1. [Customise the Theme](./styling-the-grid/#customising-themes)
1. [Style rows & cells](./styling-the-grid/#styling-rows--cells)
1. [Apply styles dynamically](./styling-the-grid/#applying-styles-dynamically)

Once complete, you will have a grid with custom styles applied to rows & cells, formatted price & date values, and a component in place of the country values.

Try it out by editing the success or price columns to see the styles update in real-time:

{% gridExampleRunner title="Full Example" name="fully-customised-example"  exampleHeight=550 /%}

## Setup

{% note %}
To follow this tutorial clone our [Basic Grid Template](#) or fork the [CodeSandbox Example](#).
{% /note %}

## Introduction

There are three ways to style the grid:

* **Themes:** CSS Classes which style all elements, including rows and cells.
* **Styles:** Applies CSS classes to rows or cells.
* **Class Rules:** Applies Styles to rows or cells based on their value.

## Customising Themes

All themes can be customised by overriding [CSS variables](./global-style-customisation-variables/).

Let's test this out by creating a new `styles.css` file with a single selector that matches our chosen theme (`ag-theme-quartz`) and override the `--ag-alpine-active-colour` to change the colour of active elements within the grid:

```css
.ag-theme-quartz {
  --ag-checkbox-checked-color: rgb(126, 46, 132);
}
```

We should now see the checkboxes styled with our new colour:

{% gridExampleRunner title="Custom Theme Example" name="custom-theme-example"  exampleHeight=550 /%}

_Note: You can also create your own theme entirely. Read our [Style Customisation](./global-style-customisation/) guide for more info._

## Styling Rows & Cells

In addition to themes, CSS classes can be applied to rows with **Row Classes** and to cells with **Cell Classes**.

**Row Classes** are defined using the `rowClass` prop, with a CSS classname as the value. Let's try this by adding a new `.row` selector in our `styles.css` file to control the font of our rows:

```css
.row {
  font-family: 'Courier New';
}
```

And then setting the value of the `rowClass` prop to the `.row` selector:

```jsx
<div className="ag-theme-material" style={{ width: 600, height: 500 }}>
 <AgGridReact ... rowClass='row' />
</div>
```

All rows should now use the Courier New font:

{% gridExampleRunner title="Row Class Example" name="row-class-example"  exampleHeight=550 /%}

**Cell Classes** work in the same way but are applied by adding a `cellClass` property to the column we want the styles to apply to. Let's try this by adding a new selector to `styles.css` to set the font-weight of the 'Mission' column:

```css
.mission-cell {
  font-weight: 900;
}
```

And then setting the value of the `cellClass` prop on the 'Mission' column to the `.mission-cell` selector:

```jsx
const [colDefs] = useState([
 {
   field: "mission",
   resizable: false,
   cellClass: 'mission-row' // Apply 'mission-row' class to cells within this column
 },
 ...
]);
```

We should now see our mission column with a heavy font-weight:

{% gridExampleRunner title="Cell Class Example" name="cell-class-example"  exampleHeight=550 /%}

## Applying Styles Dynamically

Styles can also be dynamically applied to rows with **Row Class Rules** and to cells with **Cell Class Rules**.

**Row Class Rules** are configured by providing a JavaScript map to the `rowClassRules` prop where the keys are the CSS classnames and the values are functions that describe when the selectors should be applied.

Let's try this out by adding a few new selectors to our `styles.css` file to control the colour of the row when hovered:

```css
.successful-mission:hover {
 background: green;
}

.unsucessful-mission:hover {
 background: red;
}
```

And then creating a map to apply these classes based on the value of the 'Sucessful' column:

```jsx
const rowClassRules = {
 'unsucessful-mission': (p: RowClassParams) => { return p.data.successful === false },
 'successful-mission': (p: RowClassParams) => { return p.data.successful === true }
}

<div className="ag-theme-material" style={{ width: 600, height: 500 }}>
 <AgGridReact ... rowClassRules=rowClassRules />
</div>
```

We should now see that rows are either green or red when hovered, depending on the value of the 'succesful' column:

{% gridExampleRunner title="Row Class Rule Example" name="row-class-rule-example"  exampleHeight=550 /%}

**Cell Class Rules** work in the same but are applied by adding a `cellClassRules` property to the column we want the styles to apply to.

Let's try this out by adding a few new selectors to our `styles.css` file to control the style of the 'price' column:

```css
.very-low-cost {
 background: linear-gradient(to right, #03682995 30%, #313131 1%);
 border-right: #313131 !important;
}

.low-cost {
 background: linear-gradient(to right, #03682995 45%, #313131 1%);
 border-right: #313131 !important;
}

.medium-cost {
 background: linear-gradient(to right, #FFA50095 60%, #313131 1%);
 border-right: #313131 !important;
}

.high-cost {
 background: linear-gradient(to right, #FF000095 75%, #313131 1%);
 border-right: #313131 !important;
}

.very-high-cost {
 background: linear-gradient(to right, #FF000095 90%, #313131 1%);
 border-right: #313131 !important;
}
```

And then creating another map and setting it as the value for our `cellClassRules` prop on otheur 'Price' column:

```jsx
const cellClassRules = {
 'very-low-cost': (p: CellClassParams) => { return p.value < 2500000},
 'low-cost': (p: CellClassParams) => { return p.value > 2500000 && p.value < 5000000},
 'medium-cost': (p: CellClassParams) => { return p.value > 5000000 && p.value < 7500000},
 'high-cost': (p: CellClassParams) => { return p.value > 7500000 && p.value < 9000000},
 'very-high-cost': (p: CellClassParams) => { return p.value >= 9000000},
}

const [colDefs] = useState([
 {
   field: "price",
   cellClassRules: cellClassRules // Apply cellClassRules map to the price column
 },
 ...
]);
```

We should now see our price column formatted based on its value:

{% gridExampleRunner title="Cell Class Rule Example" name="cell-class-rule-example"  exampleHeight=550 /%}

***

## Test Your Knowledge

Let's put what you've learned so far into action by modifying the grid:

1. Set the colour of `--ag-header-column-resize-handle-color` to `rgb(155, 155, 155)`

   _Hint: `--ag-header-column-resize-handle-color` is a theme CSS variable_

1. Apply a CSS Class to the 'mission' column that sets `cursor: pointer`.

   _Hint: Use the `cellClass` property on the 'Mission' column to provide a CSS class to the cells_

Once complete, your grid should look like the example below. If you're stuck, check out the source code to see how its done:

{% gridExampleRunner title="Full Example" name="fully-customised-example"  exampleHeight=550 /%}

***

## Summary

Congratulations! You've completed the tutorial and customised, styled, & extended your grid. By now, you should be familiar with several concepts:

* **Themes:** CSS Classes that control the look and feel of the entire grid. Choose from and 1 of 5 pre-made themes, or create your own.
* **Styles:** Apply CSS Classes to rows & cells directly, either by default or based on arbitrary data in the grid.

***

## Next Steps

Check out our other guides to explore more features of AG Grid:

* [...]()
